<template>
    <div class="back_contain_n User">
        <!-- 头部搜索 -->
        <div class="Search_Top_Part">
            <div class="search_list" >
                <div>
                    <div class="input_flex">
                        <el-input clearable v-model="queryParam.name" placeholder="姓名"></el-input>
                    </div>
                    <div class="input_flex">
						<el-select clearable v-model="queryParam.deptId" placeholder="部门">
							<el-option v-for="item in deptList" :key="item.id" :label="item.deptName" :value="item.id"/>
						</el-select>
                    </div>
                    <div class="input_flex">
						<el-select clearable v-model="queryParam.roleId" placeholder="角色">
							<el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"/>
						</el-select>
                    </div>
                    <div class="input_flex">
                        <el-select clearable v-model="queryParam.status" placeholder="状态">
                            <el-option label="正常" value="0"></el-option>
                            <el-option label="停用" value="1"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="search_bt">
                <span class="zll-search" @click="getList">搜索</span>
                <span class="zll-search-reset" @click="searchReset()">重置</span>
            </div>
        </div>
        <div class="Search_Top_Input">
            <div class="addNew">
                <span @click="handleCreate()" v-if="hasRole('user:system:add')"><i class="el-icon-circle-plus-outline"></i> 新建</span>
                <span class="delete" @click="batchDelete" v-if="hasRole('user:system:del')"><i class="el-icon-delete"></i> 删除</span>
            </div>
        </div>
        <!-- table -->
        <sys-table
            :isMultipleSelection="true"
            :tableData="tableData"
            :tableLoading="tableLoading"
            :tableHeader="tableHeader"
            :scopeWidth="120"
            @getSelection="getSelection"
			ref="systable"
        >
            <template slot-scope="scope" slot="operate">
                <el-button @click="editLogin(scope.row)" type="text" size="small" v-if="hasRole('user:system:edit')">编辑</el-button>
                <el-button type="text" size="small" @click="deleteRow(scope.row)" v-if="hasRole('user:system:del')" >删除</el-button>
            </template>
        </sys-table>

        <!-- 新建弹框 -->
        <div class="zll-dialog">
            <popout :title="operateType=='add'?'用户 · 新建':'用户 · 修改'" :visible.sync="addDialog" v-show="addDialog" class="userEdit">
				<Add ref="add" slot="content" :editData="userDetail" :type="operateType" :existLogin="tableData"></Add>
                <template slot="bottom">
                    <p class="zll-botton Info" v-if="operateType == 'see'" @click="addDialog = false">关 闭</p>
                    <p class="zll-botton" v-else @click="()=>{this.$refs.add.submitForm('addForm')}">提 交</p>
                </template>
            </popout>
        </div>
    </div>
</template>

<script>
    import Add from './Add'
    export default {
        data(){
            return {
				tableData: [],
				tableHeader:[],
				tableLoading:true,
				option:{showOperate:true},
				selectChoice:[],
				userDetail:{},
				operateType:"add",
				queryParam:{deptId:'',name:'',roleId:'',status:''},
				deptList:[],
				roleList:[],

				addDialog:false
            }
        },
        methods: {
			handleCreate(){
				this.userDetail = {deptId:"",roleId:"",workNum:"",userName:"",userAccount:"",password:"",accountStatus:"0"};
				this.operateType = "add";
				this.addDialog = true;
			},

			editLogin(rowData){
				this.userDetail = Object.assign({},rowData);
				this.operateType = "edit";
				this.addDialog = true;
			},

			seeLogin(rowData){
				this.userDetail = Object.assign({},rowData);
				this.operateType = "see";
				this.addDialog = true;
			},

			getSelection(val){
				this.selectChoice = val;
			},
			getList() {
				let self = this;
				self.tableLoading = true;
				self.$refs.systable.resetPage();
				self.$http({
					url: "/jinl/login/getLoginList",
					method: "post",
					params:self.queryParam
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						self.tableData = resp.result;
						self.tableHeader =  [
							{"columnValue": "deptName", "columnName": "部门"},
							{"columnValue": "roleName", "columnName": "角色"},
							{"columnValue": "userName", "columnName": "姓名"},
							{"columnValue": "userAccount", "columnName": "用户名"},
							{"columnValue": "phone", "columnName": "手机号"},
							{"columnValue": "workNum", "columnName": "工号"},
							{"columnValue": "accountStatusCn", "columnName": "状态","width":"80px"},
							{"columnValue": "createTimeFt", "columnName": "日期"},];
						self.option.showOperate = true;
					}
				});

			},
			clearList() {
				let self = this;
				self.queryParam = {deptId:'',name:'',roleId:'',status:''};
				self.getList()
			},
			deleteRow(row){
				let ids = [row.id];
				this.deleteRows(ids);
			},

			batchDelete(){
				let ids = [];
				for(let data of this.selectChoice){
					ids.push(data.id);
				}
				this.deleteRows(ids);
			},

			deleteRows(ids) {
				let self = this;
				let param = {ids:[]};
				param.ids = ids;
				if(param.ids.length < 1){
					self.$notify({
						title: '提示',
						message: "至少选择一条记录！",
						type: 'warning'
					});
					return
				}
				self.$confirm('确定删除该信息？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http({
						url: "/jinl/login/delLogin",
						method: "post",
						data: JSON.stringify(param),
						dataType: 'json',
						contentType: "application/json",
					}).then(resp => {
						if (resp.success) {
							self.getList();
							self.$notify({
								title: '提示',
								message: "删除成功！",
								type: 'success'
							});
							return
						}
						self.$notify({
							title: '提示',
							message: "操作失败，请联系管理员！",
							type: 'error'
						});
					});
				});
			},
			getRoleList() {
				let self = this;
				self.$http({
					url: "/jinl/role/getRoleList",
					method: "post",
				}).then(resp => {
					if (resp.success) {
						self.roleList = resp.result;
					}
				});
			},

			searchReset(){
				for(let key in this.queryParam){
					this.queryParam[key] = '';
				}
				this.getList();
			},

			getDeptList() {
				let self = this;
				self.$http({
					url: "/jinl/dept/queryDeptChooseList",
					method: "post",
				}).then(resp => {
					if (resp.success) {
						if(resp.result.length > 0){
							self.deptList = resp.result;
						}
					}
				});
			},
        },
        mounted(){
			let self = this;
			self.getDeptList();
			self.getRoleList();
			self.$eventBus.$on("updateLoginList",function () {
				self.queryParam = {deptId:'',name:'',roleId:'',status:''};
				self.addDialog = false;
				self.getList()
			});
			self.getList()
        },
        components: {
            Add,
        }
    }
</script>

<style lang="scss" scoped>
@import "@/style/SearchTop.scss";
</style>
